<template>
    <div id="quan">
        <div id="center">
            <div class="app">
                <div class="top">
                    <a href="####">《 </a>
                    <div>个人中心</div>
                </div>
                <div class="center">
                    <div class="cen-d1-box">
                        <div class="center-div1">
                            <img src="https://www.jq22.com/demo/erp_manage202011252307/img/touxiang.png" alt="">
                            <div>
                                <a href="###">登录</a>
                                <a href="###">注册</a>
                            </div>
                        </div>
                        <div class="center-div2">
                            <span>
                                74.00
                                <br>
                                账户余额
                            </span>
                            <span>
                                4789
                                <br>
                                可用金豆
                            </span>
                            <span>
                                10
                                <br>
                                可用优惠卷
                            </span>
                            <div class="clear"></div>
                        </div>
                    </div>
                    <div class="cen-d2-box">
                        <div class="cen-d2-box-div">
                            <span>邀好友，赚爱豆</span>
                            <button>前往</button>
                            <div class="clear"></div>
                        </div>
                    </div>
                    <div class="cen-d3-box">
                        <div class="cen-d3-box-d1" v-for="(value,index) in 4" :key="index">
                            <h4>店铺管理</h4>
                            <p>
                                已有店铺数量
                                <br>
                                10
                            </p>
                        </div>
                    </div>
                    <div class="cen-d4-box">
                        <div class="cen-d4-box-div" v-for="(value,index) in 8" :key="index">
                           <span>账户设置</span>
                            <p> 》</p>
                            <div class="clear"></div> 
                        </div>
                        
                    </div>
                    <div class="cen-d5-box">
                        <button>退出登录</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    
}
</script>
<style>
*{
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
}
.clear {
    clear: both;
}
#center{
    margin: auto;
    background:url(https://www.jq22.com/css/img/bgiphone2.png);
    padding: 102px 25px 159px 23px;
    width: 414px;
}
.app {
    width: 396px;
}
.top a {
    float: left;
    margin-left: 20px;
}
.top {
    font-size: 17px;
    text-align: center;
    background: rgb(248,249,253);
}
.center {
    color: white;
}
.cen-d1-box {
    padding: 10px 0 30px;
    background: blue;
    border-radius: 15px;
}
.center-div1 div{
    margin-left: 50px;
    margin-bottom: 25px;
}
.center-div1 div a{
    color: white;
}
.center-div2 {
    text-align: center;
}
.center-div2 span {
    border-left: 1px solid white;
    float: left;
    width: 33%;
}

.cen-d2-box-div {
    padding: 5px 15px 5px;
}
.cen-d2-box span {
    color: #696974;
}
.cen-d2-box button{
    float: right;
    color: white;
    background: blue;
    padding: 0 5px 0;
}

.cen-d3-box-d1 {
    display: inline-block;
    background: blue;
    width: 43%;
    text-align: center;
    margin: 8px 8px 8px;
    padding: 15px 0 15px;
}

.cen-d4-box {
    width: 100%;
}
.cen-d4-box-div {
    margin:0 0 18px;
    color: #696974;
    border-bottom: 1px solid #696974;
}
.cen-d4-box-div span {
    float: left;
}
.cen-d4-box-div p {
    float: right;
}

.cen-d5-box {
    width: 100%;
    text-align: center;
}
.cen-d5-box button {
    background-color:blue;
    width: 95%;
    height: 40px;
    color: white;
    font-size: 17px;
    border-radius: 17px;
}


</style>